import { List, TextareaItem, WhiteSpace, InputItem, Button, Picker, Flex, DatePicker } from 'antd-mobile';
import { createForm } from 'rc-form';
import moment from 'moment';
import AutoComplete from './AutoComplete';
import {Setting} from './Setting';

const Item = List.Item;
const Brief = Item.Brief;

class LoginT extends React.Component {

  constructor(props) {
      super(props);

      this.state = {
        gpaValue : props.record.gpa,
        gpaTotalValue: props.record.gpaTotal,
        hwxxjl: props.record.hwxxjl,
        bydw: props.record.bydw,
        bydwm: props.record.bydwm,
        byzydm: props.record.byzydm,
        byzymc: props.record.byzymc,
        fxzydm: props.record.fxzydm,
        fxzymc: props.record.fxzymc,
        dezydm: props.record.dezydm,
        dezymc: props.record.dezymc,
        pmfs: props.record.pmfs ? [props.record.pmfs] : '',
        rxnf: props.record.rxnf ? moment(props.record.rxnf, 'YYYY') : moment().subtract(4, 'years'),
      };
  }
  handeGpaClick(e){
    let reg = /^([1-9]\d*|0)(\.\d*)?$/
     if(! e || reg.test(e) ){
        this.setState({gpaValue : e})
     }
  }
  handeGpaTotalClick(e) {
    let reg = /^([1-9]\d*|0)(\.\d*)?$/
    if (!e || reg.test(e)) {
      this.setState({ gpaTotalValue: e })
    }
  }
  render() {
    const name = this.props.nodeName;
    const { getFieldProps } = this.props.form;
    // const ranking = [{ value: '1', label: '学校' }, { value: '2', label: '院系' }, { value: '3', label: '专业' }, { value: '4', label: '其他' }];
    const ranking  = [ {value:'3',label:'专业'} ];

    return (
      <div className={name}>
        <h2 className="step-title">{this.props.title}</h2>
        <WhiteSpace />

        <List>
          <DatePicker
            mode="year"
            title="年份"
            extra="请选择"
            value={this.state.rxnf}
            format={v => v.format("YYYY")}
            minDate={moment('19700101', 'YYYYMMDD')}
            onChange={(v) => this.setState(Object.assign({}, this.state, {rxnf: v}))}
          >
            <List.Item arrow="horizontal">入学年份</List.Item>
          </DatePicker>
          <input type="hidden" value={ this.state.rxnf.format("YYYY") } name="rxnf"></input>
        </List>
        <WhiteSpace />

        <List>
          <AutoComplete
            title="本科学校名称"
            placeholder="请输入学校名称"
            url={`${Setting.BaseUrl}query-school`}
            value= {{label: this.state.bydw, value: this.state.bydwm}}
            onChange = { (v) => this.setState({ bydwm: v.value, bydw: v.label}) }
          />
          <input type="hidden" value={ this.state.bydwm } name="bydwm"></input>
          <input type="hidden" value={ this.state.bydw } name="bydw"></input>
        </List>
        <WhiteSpace />

        <List>
          <AutoComplete
            title="本科就读专业名称"
            placeholder="请输入本科就读专业名称"
            url={`${Setting.BaseUrl}query-major`}
            value= {{label: this.state.byzymc, value: this.state.byzydm}}
            onChange = { (v) => this.setState({ byzydm: v.value, byzymc: v.label}) }
          />
          <input type="hidden" value={ this.state.byzydm } name="byzydm"></input>
          <input type="hidden" value={ this.state.byzymc } name="byzymc"></input>
        </List>
        <WhiteSpace />

        <List>
          <AutoComplete
            title="辅修专业"
            placeholder="请输入辅修专业名称"
            url={`${Setting.BaseUrl}query-major`}
            value={{ label: this.state.fxzymc, value: this.state.fxzydm }}
            onChange={(v) => this.setState({ fxzydm: v.value, fxzymc: v.label })}
          />
          <input type="hidden" value={this.state.fxzydm} name="fxzydm"></input>
          <input type="hidden" value={this.state.fxzymc} name="fxzymc"></input>
        </List>
        <WhiteSpace />

        <List>
          <AutoComplete
            title="第二学位专业"
            placeholder="请输入第二学位专业名称"
            url={`${Setting.BaseUrl}query-major`}
            value={{ label: this.state.dezymc, value: this.state.dezydm }}
            onChange={(v) => this.setState({ dezydm: v.value, dezymc: v.label })}
          />
          <input type="hidden" value={this.state.dezydm} name="dezydm"></input>
          <input type="hidden" value={this.state.dezymc} name="dezymc"></input>
        </List>
        <WhiteSpace />

        <List>
          <InputItem
            placeholder=""
            name="zcxh"
            type="number"
            defaultValue={this.props.record.zcxh}
          >注册学号</InputItem>
        </List>
        <WhiteSpace />

        <List>
          <Picker
              extra= "请选择"
              data= {ranking}
              title= "选择成绩排名方式"
              cols= {1}
              value= {this.state.pmfs}
              onChange = { v => this.setState(Object.assign({}, this.state, { pmfs: v })) }
            >
            <List.Item arrow="horizontal">成绩排名方式</List.Item>
          </Picker>
          <input type="hidden" value={ this.state.pmfs } name="pmfs"></input>
        </List>
        <WhiteSpace />

        <List>
          <InputItem
            placeholder=""
            name="pmrs"
            type="number"
            defaultValue={this.props.record.pmrs}
          >排名人数</InputItem>
        </List>

        <List>
          <InputItem
            placeholder=""
            name="pm"
            type="number"
            defaultValue={this.props.record.pm}
          >排名</InputItem>
        </List>
        <WhiteSpace />

        <List>
          <InputItem
            placeholder=""
            name="gpa"
            extra="得分"
            defaultValue={this.props.record.gpa}
            onChange={(e) => {this.handeGpaClick(e)}}
            value={this.state.gpaValue}
            onExtraClick
          >GPA</InputItem>
          <InputItem
            placeholder=""
            name="gpaTotal"
            extra="满分"
            defaultValue={this.props.record.gpaTotal}
            onChange={(e) => { this.handeGpaTotalClick(e) }}
            value={this.state.gpaTotalValue}
            onExtraClick
          >&nbsp;</InputItem>
        </List>
        <WhiteSpace />

        <List>
          <InputItem
            placeholder=""
            name="gpa5"
            defaultValue={this.props.record.gpa5}
            labelNumber={11}
          >前5个学期绩点排名比值</InputItem>
        </List>
        <WhiteSpace />

        <List renderHeader={() => '海外学习经历(限50字)'}>
          <TextareaItem
            name="hwxxjl"
            rows='5'
            value={this.state.hwxxjl || ''}
            autoHeight
            count={50}
            placeholder="请填写海外学习经历信息"
            onChange={(v) => this.setState({ hwxxjl: v })}
          />
        </List>
        <WhiteSpace />

      </div>
    );
  }
}

const Step6 = createForm()(LoginT);

export default Step6
